<template>
	<view>
		<view id="content" style="margin-top: 10px;">
			<van-list v-for="evaluate in evaluateLists" :key="evaluate.id">
				<view class="evaluation-card">
					<view class="top-bar">
						<view class="left"><image :src="evaluate.avatar" class="avatar" /></view>
						<view class="left2">
							<text class="nickname">{{ evaluate.nickname }}</text>
							<view class="time">{{ evaluate.create_time }}</view>
						</view>

						<view class="right">
							<view class="star"><uni-rate v-model="evaluate.rank" size="16"></uni-rate></view>
						</view>
					</view>

					<view>
						<view class="evaluation-content">
							<p class="">{{ evaluate.content }}</p>
						</view>
					</view>
				</view>
			</van-list>
		</view>
	</view>
</template>

<script>
import uniRate from '@/components/uni-rate/uni-rate.vue';

export default {
	components: {
		uniRate
	},
	data() {
		return {
			evaluateLists: []
		};
	},
	onLoad(options) {
		this.loadLists(options.goods_id);
	},
	methods: {
		loadLists(goods_id) {
			this.$http.post('/shop.goods/evaluate', { goods_id: goods_id }).then(res => {
				this.evaluateLists = res.data.data;
			});
		}
	}
};
</script>

<style lang="scss">
.evaluation-card {
	width: 100%;
	margin-bottom: 10px;
	padding: 10px 0 10px;
	box-sizing: border-box;
	background-color: #fff;
}

.top-bar {
	width: 100%;
	display: flex;
	padding: 24rpx;
	box-sizing: border-box;
	align-items: center;

	.left {
		.avatar {
			width: 70rpx;
			height: 70rpx;
			border-radius: 35rpx;
		}
	}
	.left2 {
		margin-left: 24rpx;
		.nickname {
			flex: 1;
			color: #111;
			font-size: 12px;
			font-weight: 500;
			line-height: 14px;

			.time {
				color: #999;
			}
		}
	}
	.right {
		margin-left: auto;
	}
}

.evaluation-content {
	color: #111;
	font-size: 14px;
	line-height: 20px;
	padding: 5px 15px;
}
</style>
